<template>
	<div class="videocontent" ref='videocontent' title="音量">
		<video v-show='videoIsShow' ref='videoCon' class="videoCon" controls="" src="@/assets/videos/1.mp4"></video>
		<!-- canvas绘制视频 -->
		<canvas width='800' height="446" class="videoCanvas" ref='videoCanvas' @click="videoPlay"></canvas>
		<!-- 开关灯 -->
		<div class="eye" v-show='1'>
			<i class="glyphicon i-eye" v-show='eyeShow' :class="iconEye" title="关灯" @click="closeEye"></i>
		</div>
		<!-- 视频结束提示 -->
		<div class="videoEnd" ref='videoEnd' v-show="isEnd">
			视频已结束
		</div>
	</div>
</template>

<script>
	export default {
		name: 'VideoContent',
		props: ['dragend', 'isShow', 'eyeShow', 'isEnd', 'isExpand'],
		data() {
			return {
				isOpen: true,
				videoIsShow: true,
			}
		},
		computed: {
			iconEye() {
				return {
					"glyphicon-eye-open": this.isOpen,
					"glyphicon-eye-close": !this.isOpen,
				}
			},
			videoPath() {
				return this.$store.state.path
			},
			pageExpand() {
				return this.$store.state.pageExpand
			},
			windowWith() {
				return window.innerWidth
			},
			windowHeight() {
				return window.innerHeight
			},
		},
		watch: {
			pageExpand: {
				handler: function() { // 网页全屏 / 退出网页全屏
					this.videoPageExpand(this.pageExpand)
				},
				deep: true,
			},
			videoPath() {
				// 从仓库中获取视频路径
				this.$refs.videoCon.src = this.videoPath
			},
			isEnd() {
				this.$refs.videoEnd.style.width = this.$refs.videoCanvas.style.width
				this.$refs.videoEnd.style.height = this.$refs.videoCanvas.style.height
			}
		},
		methods: {
			videoPlay() {
				this.$emit('videoPlay')
			},
			closeEye() {
				let body = this.$root.$el.parentNode
				this.isOpen ? body.style.background = '#000' : body.style.background = 'rgb(0,0,0,0.7)'
				this.isOpen = !this.isOpen
			},
			createVideo() {
				let cxt = this.$refs.videoCanvas.getContext('2d')
				let video = this.$refs.videoCon
				fn()

				function fn() {
					cxt.drawImage(video, 0, 0, 800, 446)
					requestAnimationFrame(fn)
				}
			},
			videoPageExpand(expand) { // 网页全屏
				let width = document.documentElement.clientWidth
				let height = document.documentElement.clientHeight
				width >= height * 2 ? width = height * 2 : height = ""
				width === window.innerWidth ? height = window.innerHeight + "px" : height = ""
				if (!expand) { // 缩小为原始大小
					width > 950 ? width = 800 : width = 600
					height = ''
				}
				this.$refs.videoCanvas.style.width = width + "px"
				this.$refs.videoCanvas.style.height = height + "px"
			},
		},
		mounted() {
			this.createVideo()
		}
	}
</script>

<style>
	.videocontent {
		background: #000;
		/* display: flex; */
		border-radius: 5px;
	}

	.videoCanvas {
		position: relative;
		border-radius: 5px;
	}

	/* 把真的视频播放器放在下面隐藏起来 */
	.videoCon {
		position: absolute;
		z-index: -999;
		top: 0px;
		left: 0px;
		width: 100px;
		border-radius: 5px;
	}

	.eye {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 5px;
		bottom: 0;
		margin: auto;
		height: 25px;
		width: 25px;
		bottom: 0;
		color: #fff;
		opacity: 0.8;
	}

	.eye i {
		cursor: pointer;
	}

	.videoEnd {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 100px;
		width: 100%;
		line-height: 100px;
		border-radius: 5px;
		text-align: center;
		background: #000;
		font-size: 30px;
		color: #fff;
	}

	/* 响应式 */
	@media screen and (min-width: 0px) and (max-width: 320px) {
		.i-eye {
			font-size: 5px;
		}
	}

	@media screen and (min-width: 320px) and (max-width: 700px) {
		.i-eye {
			font-size: 18px;
		}
	}

	@media screen and (min-width: 700px) {
		.i-eye {
			font-size: 20px;
		}
	}

	@media screen and (min-width: 0px) and (max-width: 700px) {
		.videoCanvas {
			width: 100%;
		}
	}

	@media screen and (min-width: 700px) and (max-width: 980px) {
		.videoCanvas {
			width: 600px;
		}
	}

	@media screen and (min-width: 980px) {
		.videoCanvas {
			width: 800px;
		}
	}
</style>
